<style lang="scss" scoped>
  .page-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
  }
</style>
<template>
<div class="page-navigation">
  <Page
      ref="page"
      :total="pageNavigation.total"
      :page-size-opts="pageSizeOpts"
      :current.sync="pageNavigation.pageNumber"
      show-total
      show-sizer
      show-elevator
      :page-size="pageNavigation.pageSize"
      @on-change="$emit('handleChangePage',$event)"
      @on-page-size-change="$emit('handleChangePageSize',$event)"
  >

  </Page>
</div>
</template>

<script>
export default {
  name: 'page-navigation',
  data(){
    return {

    }
  },
  props:{
    pageSizeOpts:{
      default:()=>{
        return [10, 30, 50, 100];
      }
    },
    pageNavigation:{
      default:()=>{
        return { total: 0, pageSize: 10, pageNumber: 1 };
      }
    },
  },
  watch:{
    '$i18n.locale':function(){
      this.$refs.page.$forceUpdate();
      this.$refs.page.$children[0].$forceUpdate();
    }
  }
}
</script>